<template>
  <div class="rightmenu">
    <div @click="showleftnav">
      <i class="icon" :class="Collapseicon"></i>
    </div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#00F5FF"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
      <!-- <el-menu-item class="icon"><i class="el-icon-s-fold"></i></el-menu-item> -->
      <!-- <el-button class="el-icon-s-fold icon"></el-button> -->
      <el-submenu index="1">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">个人设置</el-menu-item>
        <el-menu-item index="/quit">退出</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: "1",
      fullscreenLoading: false,
      isCollapse: this.$store.state.isCollapse,
      Collapseicon: "el-icon-s-fold",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      switch (key) {
        case "/quit":
          this.logout();
      }
    },
    showleftnav() {
      this.isCollapse = !this.isCollapse;
      this.$store.commit("ChangeCollapse", this.isCollapse);
      if (this.$store.state.isCollapse) {
        console.log(this.$store.state.isCollapse);
        this.Collapseicon = "el-icon-s-unfold";
      } else {
        this.Collapseicon = "el-icon-s-fold";
      }
    },
    logout() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$router.replace("/login");
        window.localStorage.removeItem("token");
      }, 1000);
    },
  },
};
</script>
<style scoped>
.rightmenu {
  display: flex;
  background-color: #545c64;
}
.el-menu-demo {
  display: flex;
  border-bottom: none !important;
  justify-content: flex-end;
  width: 100%;
}
.hack {
  flex-grow: 1;
  cursor: default;
  /* display: none; */
}
.hack:hover {
  /* 取消掉原有的悬浮效果 */
  background-color: rgb(84, 92, 100) !important;
}
.icon {
  font-size: 25px;
  position: relative;
  top: 15px;
}
</style>